<!--
  *
   * @description: 课程列表，主要加入了回弹的加载更多动画，依赖bs-scroll，需要靠内部的scroll事件和touch事件共同控制
   *
-->

<template>
  <div>
    <div class="investment-class" ref="container">
      <ul class="content" ref="inner">
        <BannerCard
          v-for="(item, index) in videoList"
          :liveAuth="liveAuth"
          @book="bookSuccess"
          :cardData="item"
          :key="index"
        ></BannerCard>
        <div v-if="liveAuth" class="bs-load" ref="bsload">
          <div class="load-text">左<br />滑<br />更<br />多</div>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
import BScroll from '@better-scroll/core';
import BannerCard from './BannerCard';
export default {
  name: 'BannerLoadMore',
  components: { BannerCard },
  data() {
    return {
      // 首次触发回弹
      firstGetMore: false,
      // 需要更新状态
      needFirstGetMore: false,
      // 在触碰状态，
      inTouched: false,
      // 滚动对象
      bsDom: null,
      // 滚动最大位置
      bsEnd: 0,
    };
  },
  props: {
    videoList: {
      type: Array,
      default: () => [],
    },
    liveAuth: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.initBS();
  },
  methods: {
    // 初始化滚动，为了实现动画效果
    initBS() {
      const bs = new BScroll('.investment-class', {
        startX: 0,
        click: true,
        scrollX: true,
        scrollY: false,
        eventPassthrough: 'vertical',
        // 这里取3，任何时候都触发。
        probeType: 3,
      });
      if (this.liveAuth) {
        // 有权限才有加载高恒多
        const { clientWidth } = this.$refs.container;
        const scrollWidth = this.$refs.inner.clientWidth;
        let rightLoad = this.$refs.bsload.clientWidth;
        // 因为有margin，计算宽度为 80 /80+50,计算向下
        const coefficient = 0.5;
        rightLoad = rightLoad * coefficient;
        // 记录滚动到最右的位置
        this.bsEnd = scrollWidth - clientWidth - 1;
        // 加载逻辑为手指触碰的情况下，滚动+可视区宽度》 加载更多宽度 +滚动区宽度
        bs.on('scroll', position => {
          // 取反
          const x = -position.x;
          // 手指接触时，直接触发，否则在第二次回弹时才触发，触发后重置
          if (x + clientWidth > scrollWidth + rightLoad) {
            if (this.inTouched) {
              this.goVideoList();
            } else if (this.firstGetMore) {
              this.goVideoList();
            } else {
              this.needFirstGetMore = true;
            }
          }
        });
        bs.on('scrollStart', this.touchStart);
        bs.on('scrollEnd', this.scrollEnd);
        bs.on('touchEnd', this.touchend);
      }
      this.bsDom = bs;
    },
    touchStart() {
      this.inTouched = true;
    },
    scrollEnd() {
      // 由于很难用节流控制，在结束事件内赋值
      if (this.needFirstGetMore) {
        this.firstGetMore = true;
        this.needFirstGetMore = false;
      }
    },
    touchend() {
      this.inTouched = false;
    },
    // 视频列表
    goVideoList() {
      window.statConf.click('morecourse');
      this.firstGetMore = false;
      this.needFirstGetMore = false;
      // 离开页面后，滚动会被打断，需要主动恢复原位
      this.bsDom.scrollTo(-this.bsEnd, 0);
      this.$router.push({ path: '/liveList' });
    },
    // 单个视频
    goVideoPlay(item) {
      window.statConf.click('course');
      // 离开页面后，滚动会被打断，需要主动恢复原位
      this.bsDom.scrollTo(-this.bsEnd, 0);
      _t.jumpVideoPlayPage(`${_Global.stock.api.local}coursePlay?id=${item.id}`);
    },
    bookSuccess() {
      // 内部订阅时，重新请求来更新数据
      this.$emit('change', '');
    },
  },
};
</script>

<style lang="less" scoped>
.investment-class {
  overflow-x: hidden;
  display: block;
  margin-right: -0.12rem;
  .content {
    display: inline-flex;
  }
  .live-card {
    margin-left: 0.24rem;
  }
}
.bs-load {
  white-space: normal;
  display: inline-flex;
  flex-direction: column;
  width: 1.04rem;
  margin-left: 0.24rem;
  margin-right: -0.6rem;
  line-height: 0.28rem;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.24rem;
  .load-text {
    margin-top: 0.46rem;
    background: #e6e6e6;
    border-radius: 0.08rem;
    display: block;
    padding: 0.24rem 0 0.24rem 0.16rem;
  }
}
</style>
